<template>
	<view>
		<!-- <view class="swiperbox">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" >
				<view class="scroll-view-item_H" v-for="(item,index) in list" :key="index"
				:style="{'background':index!==navindex?'#F7F7F7':'','color':index==navindex?'#FF6229':'#222222'}" @click="changeindex(index)">
					{{item}}
				</view>
			</scroll-view>
		</view> -->
		<!-- use_type  使用范围 1全平台 2商城 3外卖 -->
		<!-- coupon_type  类型 1满减券 2折扣券 3现金券 -->
		<!-- <view style="height: 96rpx;"></view> -->
		<view class="listbox" v-for="(item,index) in couponlist" :key="index">
			<view class="pricebox" v-if="item.coupon_type==1">
				￥
				<view>{{parseFloat(item.coupon_money)}}</view>
			</view>
			<view class="pricebox" v-if="item.coupon_type==2">
				<view>{{item.discount_percent/10}}折</view>
			</view>
			<view class="pricebox" v-if="item.coupon_type==3">
				￥
				<view>{{parseFloat(item.coupon_money)}}</view>
			</view>
			<view class="couponinfo">
				<view class="rule">满{{item.usable_money}}元使用</view>
				<view style="font-size: 24rpx;">领取时间：</view>
				<view class="timebox">{{item.start_time|dateFormat}}-{{item.end_time|dateFormat}}</view>
			</view>
			<view class="navbut"  @click="getcoupon(item)">
				<!-- has_get==1 已领取-->
				<view :style="{'background':item.has_get==1?'#FFF':'','color':item.has_get==1?'#F94D29':'','border':item.has_get==1?'#F94D29 solid 1rpx':'none'}">
					{{item.has_get==1?'已领取':'立即领取'}}
				</view>
			</view>
			<view class="typebox">
				<text v-if="item.use_type==1">全平台可用</text>
									<text v-if="item.use_type==2">商城可用</text>
									<text v-if="item.use_type==3">外卖可用</text>
									<text v-if="item.use_type==4">商户可用</text>
									<text v-if="item.use_type==5">停车场可用</text>
									<text v-if="item.use_type==6">指定商品可用</text>
			<!-- {{item.use_type==1?'全平台':item.use_type==2?'商城':'外卖'}}可用 -->
			</view>
			<image class="ylq" v-if="item.has_get==1" src="../../static/ylq.png"></image>
		</view>
		<kong v-if="couponlist.length==0&&loading"></kong>
	</view>
</template>

<script>
	import kong from '../../components/kong.vue'
	export default {
		components:{
			kong
		},
		data() {
			return {
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list:['全部','全平台优惠券','商城优惠券','外卖优惠券'],
				navindex:'',
				couponlist:[],//优惠券列表
				id:'',
				loading:false,
			}
		},
		filters:{
			//过滤器 用于格式化时间
			dateFormat: function(value) {           
			    var date = new Date(value*1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			    var year = date.getFullYear();
			    var month = ("0" + (date.getMonth() + 1)).slice(-2);
			    var sdate = ("0" + date.getDate()).slice(-2);
			    var hour = ("0" + date.getHours()).slice(-2);
			    var minute = ("0" + date.getMinutes()).slice(-2);
			    var second = ("0" + date.getSeconds()).slice(-2);
			    // 拼接
			    var result = year + "-" + month + "-" + sdate //+ "- " + hour + ":" + minute //+ ":" + second;
			    // 返回
			    return result;
			},
		},
		onLoad(option) {
			this.id = option.id
			this.getlist()
		},
		methods: {
			changeindex(index){
				this.navindex = index
				this.getlist()
			},
			scroll: function(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			//获取列表
			getlist(){
				// use_type  使用范围 1全平台 2商城 3外卖 
				// coupon_type  类型 1满减券 2折扣券 3现金券 
				this.$http({
					url:'api/Wechat/getMerchCouponList',
					data:{
						store_id:this.id
					}
				}).then(res=>{
					this.couponlist = res.data
					if(this.couponlist.length==0){
						this.loading = true
					}else{
						this.loading = false
					}
					
				})
			},
			//领取优惠券
			getcoupon(item){
				//has_get==1 已领取
				if(item.has_get==1){
					uni.navigateBack({
						delta:1
					})
				}else{
					this.$http({
						url:'api/Wechat/getCoupon',
						data:{
							coupon_id:item.id+""
						}
					}).then(res=>{
						this.getlist()
					})
				}
			}
			
		}
	}
</script>

<style>
	page{
		background: linear-gradient(180deg, #F94D29 0%, #FFF 100%);
		background-repeat: no-repeat;
	}
</style>
<style lang="scss" scoped>
	.swiperbox{
		width: 100%;
		height: 96rpx;
		background-color: #FFF;
		position: fixed;
		top: 0;
		z-index: 9;
		.scroll-view_H {
			white-space: nowrap;
			width: 712rpx;
			margin: 23rpx auto;
			// height: 96rpx;
			background: #FFFFFF;
			.scroll-view-item_H {
				display: inline-block;
				width: fit-content;
				text-align: center;
				font-size: 36rpx;
				background: linear-gradient(90deg, #FFE9E1 0%, #FFF8F5 100%);
				padding: 0 24rpx;
				font-size: 28rpx;
				font-family: Source Han Sans CN-Regular, Source Han Sans CN;
				font-weight: 400;
				color: #222222;
				margin: 0 6rpx;
				height: 50rpx;
				line-height: 50rpx;
			}
		}
	}
	.listbox{
		background: url(https://zdcloud.zxkjnc.com/images/9cd8.png) no-repeat;
		
		width: 690rpx;
		height: 172rpx;
		background-size: 690rpx 172rpx;
		margin: 24rpx auto 0 auto;
		display: flex;
		position: relative;
		.pricebox{
			width: 164rpx;
			justify-content: center;
			display: flex;
			margin: 60rpx 0;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #FE5326;
			align-items: baseline;
			>view{
				font-size: 40rpx;
			}
		}
		.couponinfo{
			width: 318rpx;
			margin-left: 22rpx;
			.rule{
				font-size: 34rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #222222;
				margin: 25rpx 0 14rpx 0;
			}
			.timebox{
				font-size: 24rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #555555;
			}
		}
		.navbut{
			width: 186rpx;
			text-align: center;
			margin-top: 75rpx;
			>view{
				width: 146rpx;
				height: 54rpx;
				background: linear-gradient(90deg, #F99529 0%, #F94D29 100%);
				border-radius: 28rpx;
				text-align: center;
				line-height: 54rpx;
				font-size: 28rpx;
				font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
				font-weight: normal;
				color: #FFFFFF;
				margin: 0 auto;
			}
		}
		.typebox{
			position: absolute;
			top: 0;
			right: 0;
			width: 186rpx;
			height: 50rpx;
			text-align: center;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Medium-, SourceHanSansCN-Medium;
			font-weight: normal;
			color: #83431F;
			line-height: 50rpx;
		}
		.ylq{
			position: absolute;
			top: 0;
			right: 210rpx;
			width: 73rpx;
			height: 46rpx;
		}
	}
</style>
